<template>
  <view>
    <u-navbar
      :title="title"
      :placeholder="true"
      safeAreaInsetTop
      bgColor="#F6F6F6"
      titleStyle="font-size: 17px; font-weight: 500; color: #000000;"
      class="navbar"
    >
      <view
        class="u-nav-slot"
        slot="left"
        @click="handleShowSidebar"
        v-if="leftType"
      >
        <view class="iconfont icon-31liebiao icon-color" style=""></view>
      </view>
      <view class="u-nav-slot" slot="left" @click="back" v-else>
        <view class="back-icon" style=""></view>
      </view>
      <slot v-if="!title" slot="center"></slot>
      <view class="u-nav-slot" slot="right">
        <view
          class="iconfont icon-sousuo icon-color"
          @click="handleToSearch"
          v-if="showSearch"
        ></view>
        <view
          class="iconfont icon-bianji icon-color icon-margin"
          @click.stop="showBubbleBox"
        ></view>
      </view>
    </u-navbar>
    <SidebarModule :show="showSidebar" @closeSidebar="handleCloseSidebar" />
  </view>
</template>

<script>
import SidebarModule from "./SidebarModule.vue";
export default {
  components: { SidebarModule },
  props: {
    title: {
      type: String,
      default: "",
    },
    leftType: {
      type: Number,
      default: 0,
    },
    type: {
      type: Number,
      default: 0,
    },
    showSearch: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      showSidebar: false,
    };
  },
  methods: {
    // 侧边栏
    handleShowSidebar() {
      this.showSidebar = true;
    },
    handleCloseSidebar() {
      this.showSidebar = false;
    },
    handleToSearch() {
      if (!this.type) {
        uni.navigateTo({
          url: "/pagesTool/search/Search",
        });
      } else {
        this.$emit("handleSearch");
      }
    },
    // 显示气泡框
    showBubbleBox() {
      this.$emit("showBubbleBox");
    },
    back() {
      // this.$emit("back");
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.navbar {
  .u-nav-slot {
    display: flex;
  }
  .icon-color {
    color: #61bdb2;
    font-size: 40upx;
  }
  .icon-margin {
    margin-left: 50upx;
  }
  .back-icon {
    width: 19upx;
    height: 19upx;
    border-bottom: 2upx solid #202020;
    border-left: 2upx solid #202020;
    transform-origin: center center;
    transform: rotate(45deg);
    margin-left: 16upx;
  }
}
/deep/.u-navbar__content__right {
  padding: 0 40rpx !important;
}
</style>
